<script setup>
import {ref} from "vue";
import request5151 from "../../../utils/request5151.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {useProgressStore} from "../../../stores/progressStore.js";
const progressStore = useProgressStore()
const router = useRouter()
//清空表单
const resetForm = () => {
  studentInfoRef.value.resetFields()
}
// 注册信息数据
const studentInfo = ref({
  snumber: sessionStorage.getItem("snumber"),
  sname: "",
  sgender: "",
  sphone: "",
  birthDate: "",
  email: "",
  homeAddress: "",
  shometown: "",
  idCardNumber: "",
  spoliticalFace: "",
})
const studentInfoRef = ref()
// 表单验证规则
const studentInfoRules = ref({
  sname: [
    {required: true, message: "请输入您的姓名", trigger: "blur"},
  ],
  sgender: [
    {required: true, message: "请选择性别", trigger: "blur"},
  ],
  sphone: [
    {required: true, message: "请输入您的电话号码", trigger: "blur"},
    {pattern: /^1[3-9]\d{9}$/, message: "请输入正确的电话号码", trigger: "blur"}
  ],
  birthDate: [
    {required: true, message: "请选择您的出生日期", trigger: "blur"},
  ],
  email: [
    {required: true, message: "请输入您的邮箱地址", trigger: "blur"},
    {pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: "请输入正确的邮箱地址", trigger: "blur"}
  ],
  homeAddress: [
    {required: true, message: "请输入您的家庭住址", trigger: "blur"},
  ],
  classes: [
    {required: true, message: "请输入您的班级名称", trigger: "blur"},
  ],
  idCardNumber: [
    {required: true, message: "请输入您的身份证号", trigger: "blur"},
    {
      pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      message: "请输入正确的身份证号",
      trigger: "blur"
    }
  ]
})
// 提交注册信息
const onSubmit = () => {
  studentInfoRef.value.validate((valid) => {
    if (valid) {
      request5151({
        url: '/studentinfo/addStudent',
        method: 'post',
        data: studentInfo.value
      }).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("注册成功")
          progressStore.setProgressM(1)
          resetForm()
          router.push('/reportAll/roomSelect')
        } else {
          ElMessage.error(res.data.message)
        }
      }).catch((err) => {
        ElMessage.error("请求错误")
      })
    }
  })
}
</script>

<template>
  <div class="messageCollect_All">
    <hr>
    <h3 style="text-align: center">填写您的信息</h3>
    <el-form :model="studentInfo" label-width="auto"
             style="max-width: 600px"
             ref="studentInfoRef"
             :rules="studentInfoRules">
      <el-form-item label="本人姓名" prop="sname">
        <el-input v-model="studentInfo.sname"/>
      </el-form-item>
      <el-form-item label="性别" prop="sgender">
        <el-radio-group v-model="studentInfo.sgender">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话号码" prop="sphone">
        <el-input v-model="studentInfo.sphone"/>
      </el-form-item>
      <el-form-item label="现居地" prop="shometown">
        <el-input v-model="studentInfo.shometown"/>
      </el-form-item>
      <el-form-item label="政治面貌" prop="spoliticalFace">
        <el-select v-model="studentInfo.spoliticalFace" placeholder="选择您的政治面貌">
          <el-option label="群众" value="群众"/>
          <el-option label="共青团员" value="共青团员"/>
          <el-option label="党员" value="党员"/>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthDate">
        <el-col :span="11">
          <el-date-picker
              v-model="studentInfo.birthDate"
              type="date"
              placeholder="选择您的出生日期"
              style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="电子邮件" prop="email">
        <el-input v-model="studentInfo.email"/>
      </el-form-item>
      <el-form-item label="详细家庭住址(到门牌号)" prop="homeAddress">
        <el-input v-model="studentInfo.homeAddress"/>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCardNumber">
        <el-input v-model="studentInfo.idCardNumber"/>
      </el-form-item>
      <div class="registerButton">
        <el-button @click="studentInfoRef.resetFields()">重置</el-button>
        <el-button type="success"
                   @click="onSubmit">确认提交
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<style scoped>
.messageCollect_All {
  padding-bottom: 30px;
  width: 60%;
  margin: 0 auto;
  background-color: rgb(228, 243, 230);
}

.avatar-uploader {
  border: 2px solid black;
  width: 100px;
  height: 100px;
}

.avatar-uploader-icon {
  margin: 40px;
}

.el-form-item {
  margin-bottom: 30px;
}

.registerButton {
  width: 100%;
  margin-left: 80px;
  display: flex;
  justify-content: space-between;
}
</style>
